<template>
	<view class="add-quote-box" :style="'padding-top:'+(barHeight)+'px'">
		<NavBar>
			<template v-slot:center>
				<view class="nav_center">
					添加报价
				</view>
			</template>
			<template v-slot:left>
				<text class="cancel-add" @click="cancelAdd">取消</text>
			</template>
		</NavBar>
		<view class="add-form-box">
			<view class="form-item">
				<view class="title">企业名称</view>
				<view style="display: flex;align-items: center;">
					<input class="uni-input" placeholder="请选择企业名称" v-model="quoteEntity.companyName" />
					<uni-icons type="search" size="16" style="color: #666;" @click="loadModal(3)"></uni-icons>
				</view>
			</view>
			<view class="form-radio-item">
				<view class="title">报价类型</view>
				<radio-group @change="radioChangeQuoteType">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in quoteTypeEntities"
						:key="item.value">
						<view>
							<radio :value="item.value" color="#3f8cf7" :checked="index === currentRadioType"
								style="transform: scale(0.7)" />
						</view>
						<view>{{ item.name }}</view>
					</label>
				</radio-group>
			</view>
			<view class="form-item">
				<view class="title">项目名称</view>
				<view style="display: flex;align-items: center;">
					<input class="uni-input" placeholder="请输入项目名称" v-model="quoteEntity.projectName" />
					<uni-icons type="search" size="16" style="color: #666;" @click="loadModal(1)"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="title">产品名称</view>
				<view style="display: flex;align-items: center;">
					<input class="uni-input" placeholder="请输入产品名称" v-model="quoteEntity.deviceName" />
					<uni-icons type="search" size="16" style="color: #666;" @click="loadModal(4)"></uni-icons>
				</view>
			</view>
			<view class="form-item">
				<view class="title">产品数量</view>
				<input class="uni-input" placeholder="产品数量必填" v-model="quoteEntity.deviceNumber" />
			</view>
			<view class="form-item" style="border-bottom: none;">
				<view class="title">单价</view>
				<input class="uni-input" placeholder="单价必填" v-model="quoteEntity.price" />
			</view>
			<view class="form-item" style="border-bottom: none;">
				<view class="title">总价</view>
				<input class="uni-input" placeholder="总价必填" v-model="quoteEntity.totalPrice" />
			</view>
			<button style="margin: 20rpx" type="primary" @click="savePay">
				保存
			</button>
		</view>
		<!-- 选择合同 -->
		<view class="bottom-modal-box">
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="item" v-for="data in dataEntities" @click="loadModalValue(data)">
						{{data.title}}
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				quoteEntity: {
					companyName: '',
					projectName: '',
					deviceName: ''
				},
				dataEntities: [],
				type: 0, // 打开查询业务类型
				currentRadioType: 0,
				quoteTypeEntities: [{
						value: "0",
						name: "采购报价",
						checked: "true",
					},
					{
						value: "1",
						name: "销售报价",
					}
				],
				barHeight: 0,
			}
		},
		created() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 45 + 10;
		},
		methods: {
			savePay() {
				if (this.quoteEntity.deviceNumber == '' || this.quoteEntity.deviceNumber == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '产品数量不能为空'
					})
				}
				if (this.quoteEntity.price == '' || this.quoteEntity.price == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '单价不能为空'
					})
				}
				if (this.quoteEntity.totalPrice == '' || this.quoteEntity.totalPrice == undefined) {
					return uni.showToast({
						icon: 'none',
						title: '总价不能为空'
					})
				}
				this.quoteEntity.type = this.currentRadioType
				post(api.SaveQuote, this.quoteEntity).then(res => {
					if (res.code == '000000') {
						uni.$emit('reloadQuoteList')
					} else {
						uni.showToast({
							icon: 'error',
							title: '提交失败'
						})
					}
				})
			},
			cancelAdd() {
				uni.$emit('reloadQuoteList')
			},
			// 打开加载页面
			loadModal(type) {
				this.type = type
				this.dataEntities = []
				if (type == 1) {
					this.queryProject(type)
				} else if (type == 3) {
					this.queryPartner(type)
				} else if (type == 4) {
					this.queryDevice(type)
				}
				this.$refs.popup.open('bottom')
			},
			// 查询项目
			queryProject(type) {
				let that = this
				post(api.ProjectEntities, {}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.projectName
						that.dataEntities.push(data)
					})
				})
			},
			// 查询企业
			queryPartner(type) {
				let that = this
				post(api.PartnerEntities, {
					companyRole: 1
				}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.companyName
						that.dataEntities.push(data)
					})
				})
			},
			// 查询产品列表
			queryDevice() {
				let that = this
				post(api.DeviceList, {}).then(res => {
					res.data.forEach(function(item, index) {
						let data = {}
						data.id = item.id
						data.title = item.deviceName
						that.dataEntities.push(data)
					})
				})
			},
			// 点击弹框中的选项，返回给输入框
			loadModalValue(data) {
				if (this.type == 1) {
					this.quoteEntity.projectName = data.title
				} else if (this.type == 3) {
					this.quoteEntity.companyName = data.title
				} else if (this.type == 4) {
					this.quoteEntity.deviceName = data.title
				}
				this.$refs.popup.close()
			},
			// radio单选
			radioChangeQuoteType: function(evt) {
				for (let i = 0; i < this.quoteTypeEntities.length; i++) {
					if (this.quoteTypeEntities[i].value === evt.detail.value) {
						this.currentRadioType = i
						break
					}
				}
			},
		}
	}
</script>

<style>
	@import '../../static/css/AddQuote.css';
	@import '../../static/css/commons.css';
</style>
